<template>
    <div class="app-container">
        <div class="customContainer"  style="background:#fff">
            <!-- <div class="customHeader"> -->
                <el-select v-model="brand_id" placeholder="请选择品牌" @change="brandChange">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <br>
            <!-- </div> -->
            <div v-if="saveForm.brand_id">
                <p>
                    <b style="font-size:18px;border-bottom:1px solid #eee;padding:10px;">每月赠币</b>
                </p>
                <br>
                <p style="padding:20px 40px;" class="pull-left">
                    <b>会员等级</b>&#x3000;&#x3000;
                    <span>精英会员</span>
                </p>
                <p style="padding:10px 40px;width:50%" class="pull-right">
                    <b>&#x3000;每月赠币金额</b>&#x3000;&#x3000;
                    <span>
                        <el-input type="number"  onmousewheel="return false;" placeholder="请输入每月赠币金额" v-model="saveForm.coins" style="width:260px;"></el-input>
                    </span>
                </p>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div style='background-color:#eee;height:1px;border:none;'></div>
                <br>
                <p>
                    <b style="font-size:18px;border-bottom:1px solid #eee;padding:10px;">积分赠送</b>
                </p>
                <br>
                <p style="padding:10px 40px;width:50%">
                    <b>会员等级</b>&#x3000;&#x3000;
                    <span>普通会员，精英会员</span>
                </p>
                <p style="padding:10px 40px;width:50%" class="pull-left">
                    <b>周一至周五消费获积分</b>&#x3000;&#x3000;
                    <span>
                        <el-input type="number"  onmousewheel="return false;" placeholder="请输入周一至周五消费获积分" v-model="saveForm.working_score" style="width:260px;"></el-input>
                    </span>
                </p>
                <p style="padding:10px 40px;width:50%" class="pull-right">
                    <b>周末消费获积分</b>&#x3000;&#x3000;
                    <span>
                        <el-input type="number"  onmousewheel="return false;" placeholder="请输入周末消费获积分" v-model="saveForm.weekend_score" style="width:260px;"></el-input>
                    </span>
                </p>
            </div>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box" v-if="saveForm.brand_id">
            <el-button class="pull-right" type="primary" size="small" @click="saveClick()"> 保 存 </el-button>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        save,
        getBrand
    } from "@/api/member/member_vipBoon";
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                addEditDialog: false,
                currentPage: 1,
                totalDataNumber: 1,
                brandList: null,
                brand_id: '',
                saveForm: {
                    id: '',
                    brand_id: '',
                    coins: '',
                    working_score: '',
                    weekend_score: '',
                },

            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.brandList) {
                    vm.getBrandList();
                }
            })
        },
        methods: {
            brandChange() {
                this.fetchData();
            },
            getBrandList() {
                getBrand({ org: 1, category_id: 259 }).then(response => {
                    this.brandList = response;
                })
            },
            saveClick() {
                this.saveForm.brand_id = this.brand_id;
                this.$confirm('确认保存', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    save(this.saveForm).then(response => {
                        this.$message({
                            type: response.code == 1 ? 'success' : 'error',
                            message: response.message
                        });
                        // if (response.code == 1) {
                        // }
                    });
                })
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList({brand_id:this.brand_id}).then(response => {
                    this.saveForm = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>